<template>
  <div>
    <page-header-wrapper>

      <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="技能列表">
        <div slot="extra">
          <a-input class="name" v-model="name" aria-placeholder="search..." style="margin-left: 16px; width: 272px;" />
          <a-button style="margin-left: 10px" @click="change" type="primary" icon="search">
            Search
          </a-button>
        </div>

        <a-list size="large"

        :pagination=false
        >
          <a-list-item :key="index" v-for="(item, index) in data">
            <a-list-item-meta :description="item.description">
<!--              <a-avatar slot="avatar" size="large" shape="square" :src="item.cover"/>-->
              <a slot="title">{{ item.name }}</a>
            </a-list-item-meta>
              <div slot="actions">
<!--                <a :link="{ path: '/skill/addOrUpdate' }">编辑</a>-->
                <router-link :to="{ path: `/skill/edit/${item.id}` }">
                  <a>edit</a>
                </router-link>
              </div>

            <div slot="actions">

            <a-popconfirm
              title="Are you sure delete this task?"
              ok-text="Yes"
              cancel-text="No"
              @confirm="del(item.id)"
              @cancel="cancel"
            >
              <a>del</a>

            </a-popconfirm>
            </div>

            <div class="list-content">
              <div class="list-content-item">
                <span>Owner</span>
                <p>{{ item.username }}</p>
              </div>
              <div class="list-content-item">
                <span>发布时间</span>
                <p>{{ item.createTime }}</p>
              </div>
              <div class="list-content-item" >
                <a-popover title="技能标签" trigger="hover">
                  <template #content>
                    <a-tag color="blue">{{ item.tags[0] }}</a-tag>
                    <a-tag color="green">{{ item.tags[1] }}</a-tag>
                    <a-tag color="orange">{{ item.tags[2] }}</a-tag>
                    <a-tag color="black">{{ item.tags[3] }}</a-tag>
                    <a-tag color="red">{{ item.tags[4] }}</a-tag>
                  </template>
                  <a-button>查看技能标签</a-button>
                </a-popover>
<!--                <template slot-scope="scope">-->
<!--&lt;!&ndash;                  <router-link :to="{ path: `/skill/edit/${scope.row.id}` }">&ndash;&gt;-->
<!--                    <a style="padding-left: 20px"> edit</a>-->
<!--&lt;!&ndash;                  </router-link>&ndash;&gt;-->
<!--                </template>-->
              </div>

            </div>
          </a-list-item>
        </a-list>
      </a-card>

      <div style="padding-top: 15px; float: right">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :pageSizeOptions="pages.pageSizeOptions"
          :default-current="pages.defaultCurrent"
          :total="pages.total"
          :pageSize="pages.pageSize"
          @change="getSkills"
          @showSizeChange="onSizeChange"
        />
      </div>


    </page-header-wrapper>

  </div>
</template>

<script>
const data = []

import TaskForm from '../list/modules/TaskForm'
import Info from '../list/components/Info'
import skill from "@/api/skill";
export default {
  components: {
    TaskForm,
    Info
  },
  data() {
    return {
      data,
      status: 'all',
      pages: {
        defaultCurrent: 1, // 默认当前页数
        total: 0, // 总数，必须先有
        pageSize: 5,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        defaultPageSize: 5,
      },
      name: '',
    }
  },
  created() {
    this.getSkills();
  },
  methods: {
    cancel(e) {
      console.log(e);
      this.$message.warning('Cancel remove');
    },
    onSizeChange(current, pageSize) {
      this.pages.defaultCurrent = 1
      this.pages.pageSize = pageSize
      this.getSkills()
    },
    change(current, size) {
      this.pages.defaultCurrent = current;
      this.pages.pageSize = size;
      this.getSkills();
    },
    getSkills(currentPage = 1) {
      this.pages.defaultCurrent = currentPage;
      skill.getSkillsByPage(this.pages.defaultCurrent, this.pages.pageSize, this.name).then(response => {

        this.data = response.data.content;
        this.pages.total = response.data.total;
        console.log('技能信息：', response.data.content)
      })
    },
    del(skillId) {
      skill.deleteSkillById(skillId).then(response => {
        this.$message.success('deleted', 3);

        this.getSkills();
      })
    },

  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
span {
  line-height: 20px;
}
p {
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 22px;
}
}
</style>